<template>
  <section>
    <!--start  面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/goods'}">商品</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/goods/purOrderList'}">采购订单</el-breadcrumb-item>
        <el-breadcrumb-item>采购订单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end  面包屑-->
    <!--start content-->
    <div class="content" ref="content">
      <div class="checkIn-header">
        <span>采购单号：{{purOrderData.orderCode}} </span>
        <span class="blue">（{{purOrderData.dataBillstateStr}}）</span>
        <div class="pur-operation"  v-if="purOrderData.dataBillstate == '0'">
          <span @click="updatePurOrderBtn"><i class="iconfont icnBtn">&#xe617;</i>修改</span>
          <span @click="deldatePurOrderBtn(purOrderData)"><i class="iconfont icnBtn">&#xec50;</i>删除</span>
        </div>
      </div>
      <div class="purOrder-detail">
        <span>供应商：{{purOrderData.companyName}}</span>
        <span>采购员：{{purOrderData.transactOpName}}</span>
        <span>日期：{{purOrderData.orderDateStr}}</span>
      </div>
      <div class="checkIn-box">
        <table class="checkIn-table" border="0" cellpadding="0" cellspacing="0"  width="100%">
          <col width="4%"/>
          <col width="12%"/>
          <col width="30%"/>
          <col width="12%"/>
          <col width="7%"/>
          <col width="10%"/>
          <col width="14%"/>
          <col width="10%"/>
          <tr class="checkIn-table-th">
            <td>序号</td>
            <td>商品编码</td>
            <td>商品名称</td>
            <td>规格</td>
            <td>单位</td>
            <td>采购数</td>
            <td>采购单价（元）</td>
            <td>小计（元）</td>
          </tr>
          <tr class="checkIn-table-tr" v-for="(item,index) in purOrderData.purOrderGoodsDataList">
            <td>{{index+1}}</td>
            <td>{{item.goodsCode}}</td>
            <td>{{item.goodsName}}</td>
            <td>{{item.goodsSkuValue}}</td>
            <td>{{item.goodsNumUnit}}</td>
            <td>{{item.goodsOrderNum}}</td>
            <td>{{item.goodsOrderPrice}}</td>
            <td>{{item.goodsOrderSubtotal}}</td>
          </tr>
          <tr class="checkIn-table-total">
            <td>合计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{purOrderData.orderNum}}</td>
            <td></td>
            <td>{{purOrderData.goodsMoney}}</td>
          </tr>
          <tr class="purOther">
            <td colspan="8">
              <p>其他费用：<i>{{purOrderData.orderOtherMoney}}</i></p>
              <p>应付金额：<i class="red-color">{{purOrderData.orderMoney}}</i></p>
            </td>
          </tr>
        </table>
      </div>
      <div class="checkIn-foot">
        <p><span class="checkIn-label">备注：</span><span>{{purOrderData.orderRemark}}</span></p>
        <p><span class="checkIn-label">经办人：</span><span>{{purOrderData.transactOpName}}</span></p>
      </div>
    </div>
    <!--end content-->
  </section>
</template>
<script>
  export default{
    data(){
      return{
        orderCode:"",     //存储上个页面localStorage的orderCode
        purOrderData:{},    //请求页面获取的初始数据
      }
    },
    methods:{

      //未入库删除
      deldatePurOrderBtn(data){
        const h = this.$createElement;
        this.$msgbox({
          title: '确认',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 24px;margin-bottom: 8px;'}, '请确认是否删除？？'),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          if (action === 'confirm') {
            this.axios({
              method: 'delete',
              url:"/v3/pur/orders/"+data.orderCode,
              data:{}
            }).then((res) => {
              this.$router.push({path:"/goods/purOrderList"});
              this.Public.openSuccess(this,"操作成功！");
            }).catch((err)=>{
              this.Public.openError(this,err.response.data);
            });
          }
        });
      },

      //未入库修改
      updatePurOrderBtn(){
          localStorage.setItem("orderCode",this.orderCode);
          window.location.hash="#/goods/purOrderUpdate"

      },

      //初始化页面请求数据
      queryInfo(){
        this.axios({
          method: 'GET',
          url: "/v3/pur/orders/"+this.orderCode,
          data:{}
        }).then((res) => {
          this.purOrderData = res.data;
          this.purOrderData.orderOtherMoney = this.Public.formatMoney(res.data.orderOtherMoney,2);
          this.purOrderData.orderMoney = this.Public.formatMoney(res.data.orderMoney,2);
          this.purOrderData.goodsMoney = this.Public.formatMoney(res.data.goodsMoney,2);
          this.purOrderData.purOrderGoodsDataList.forEach((item,index,arr) =>{
              item.goodsOrderPrice = this.Public.formatMoney(item.goodsOrderPrice,2);
          })
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },
    },
    created(){
       this.orderCode = localStorage.getItem("orderCode");
       this.queryInfo();
    },
    mounted(){
      //动态设置高度
      this.$refs.content.style.height = (document.documentElement.clientHeight - 124)+"px";
    },
  }
</script>
<style scoped>

  .red-color{
    font-size: 18px;
    color: #f96868;;
  }

  .purOther td p{
   text-align: right;
    font-size: 13px;
    line-height: 36px;
  }

  .purOther td{
    padding: 4px 20px;
  }

  .purOrder-detail{
    padding: 12px 0 11px 0;
  }

  .purOrder-detail span{
    margin-right: 30px;
    font-size: 13px;
  }

  .pur-operation span{
    margin-right: 25px;
    color: #7b8aa1;
    cursor: pointer;
    vertical-align: middle;
  }

  .pur-operation span:hover{
    color: #13c19f!important;
  }

  .icnBtn{
    font-size: 14px!important;
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
    margin-right: 4px;
  }

  .pur-operation{
    width: 50%;
    float: right;
    text-align: right;
  }

  .checkIn-label{
    white-space: nowrap;
    color: #788ea4;
  }

  .checkIn-foot p{
    height: 30px;
    line-height: 30px;
    font-size: 13px;
  }

  .checkIn-foot{
    margin-top: 20px;
  }

  .checkIn-table-total td{
    text-align: center;
    color: #576b7e;
    height: 38px;
    padding: 6px;
    line-height: inherit;
    border-bottom:1px solid #e7e9f1;
    border-right:1px solid #e7e9f1;
  }

  .checkIn-table-total td:last-child{
    border-right:0px solid #e7e9f1;
  }

  .checkIn-table-tr td{
    text-align: center;
    border-bottom:1px solid #e7e9f1;
    border-right:1px solid #e7e9f1;
    color: #576b7e;
    height: 38px;
    padding: 6px;
    line-height: inherit;
  }

  .checkIn-table-tr td:last-child{
    border-right:0px solid #e7e9f1;
  }

  .checkIn-table-th td{
    text-align: center;
    border-bottom:1px solid #e7e9f1;
    border-right:1px solid #e7e9f1;
    color: #576b7e;
    height: 38px;
    padding: 6px;
    background: #eef1f9;
    line-height: inherit;
    font-weight: bold;
    font-size: 13px;
  }

  .checkIn-table-th td:last-child{
    border-right:0px solid #e7e9f1;
  }

  .checkIn-table{
    border:1px solid #e7e9f1;
    border-right:1px solid #e7e9f1;
  }

  .blue{
  color:rgb(3, 184, 204)
  }

  .checkIn-header span{
    font-size: 13px;
  }

  .checkIn-header{
    padding: 0 0 15px 0;
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #cdd9e6;
  }
  /* start  面包屑 */
  .location {padding: 3px 0 15px 0;}
  /* end  面包屑 */
  /* start content */
  .content {position: relative;background: #fff;padding: 15px;overflow-y: auto;font-family: "微软雅黑";}
</style>
